<script setup>
import { ref, onMounted } from 'vue';
import { Home } from "@/api";
import { useRouter } from 'vue-router'
import { useNewMenusStore } from '@/stores/new_menus';
import { useExpandStore } from '@/stores/expand'

// 初始化，store实例对象
let menu = useNewMenusStore()
let expand = useExpandStore();

let options = ref({})
let value = ref('')

// 菜单列表
let menuList = async () => {
    let { status, msg, data } = await Home.list();
    if (status === 200) {
        options.value = data;
    } else {
        ElNotification.error(msg);
    }
}

// 获取消息信息
let news = ref('')
let getNews = async () => {
    let { status, msg, data } = await Home.notice();
    if (status === 200) {
        news.value = data;
    } else {
        ElNotification.error(msg);
    }
}

// 退出
let router = useRouter();
let handleAdminOut = () => {
    ElMessageBox.confirm(
        '确定要退出该系统吗？',
        '退出登录',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let { status, msg } = await Home.logout();
            if (status === 200) {
                router.replace('/login')
                ElMessage.success(msg);
            }
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消退出登录！',
            })
        })
}

// 菜单搜索
let handleMenuSearch = (val) => {
    router.push(val);
}

// 回到一级菜单
let toMenu_1st = () => {
    router.push(menu.cur_menu_2nd[0].path)
}

onMounted(() => {
    menuList();
    getNews();
})

</script>

<template>
    <div class="top">
        <div class="left-top">
            <!-- 侧边栏伸缩按钮 -->
            <el-icon @click="expand.change" v-show="expand.isExpand" :size="18" style="margin-right: 20px;">
                <Fold />
            </el-icon>
            <el-icon @click="expand.change" v-show="!expand.isExpand" :size="18" style="margin-right: 20px;">
                <Expand />
            </el-icon>
            <!-- 面包屑导航 -->
            <el-breadcrumb>
                <el-breadcrumb-item @click="toMenu_1st" v-show="menu.cur_menu.menu_name !== '主页'"
                    class="el-breadcrumb-item">
                    <span class="crumbs">
                        {{ menu.cur_menu_parent.title }}
                    </span>
                </el-breadcrumb-item>
                <el-breadcrumb-item class="el-breadcrumb-item">
                    <span class="crumbs">
                        {{ menu.cur_menu.title }}
                    </span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="right-top">
            <el-select v-model="value" filterable placeholder="菜单搜索" @change="handleMenuSearch" clearable>
                <el-option v-for="item in options" :key="item.id" :label="item.menu_name" :value="item.menu_path"
                    :disabled="item.pid === 0" />
            </el-select>
            <el-icon>
                <FullScreen />
            </el-icon>
            <el-dropdown v-if="news.length !== 0">
                <el-badge is-dot class="item">
                    <el-icon>
                        <Bell />
                    </el-icon>
                </el-badge>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-for="item in news">
                            <router-link :to="item.url" style="text-decoration: none;color: black;">
                                {{ item.title }}
                            </router-link>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <el-badge v-else>
                <el-icon>
                    <Bell />
                </el-icon>
            </el-badge>
            <div class="account">
                <el-dropdown>
                    <div class="user-login">admin</div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>个人中心</el-dropdown-item>
                            <el-dropdown-item @click="handleAdminOut">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.top {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 15px;


    .left-top {
        display: flex;
        align-items: center;

        .el-icon {
            margin-right: 10px;
        }
    }

    .right-top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .el-dropdown {
            .el-badge {
                outline: none;
            }

        }

        .el-select {
            border-radius: 20px;
            margin-right: 10px;
            border: none;
        }

        .el-icon {
            margin-right: 10px;
        }

        .account {
            .el-dropdown {

                .user-login {
                    padding: 10px 20px;
                    cursor: pointer;
                    outline: 0;
                }

            }
        }
    }
}
</style>